<template>
    <div>
        <common-head title="购物车"/>
        <div class="wrap">
           <div class="items">
             <van-swipe-cell v-for='item in items' :key='item.id'>
                 <div class="item">
                 <van-checkbox @change="itemSelectChang(item.key,item.selected)" v-model="item.selected"/>
                 <van-card
                    :num="item.number"
                    :price="item.price"
                    :title="item.name"
                    :thumb="item.pic"
                  >
                    <template #footer>
                      <van-button @click="delitems(item.key)" style="margin-bottom:10px" type="danger" size="mini">删除</van-button>
                      <van-stepper @change="addItemNumber(item.key,item.number)" v-model="item.number" theme="round" button-size="22" disable-input/>
                    </template>
                  </van-card>
             </div>
                  <template #right>
                    <van-button square @click="delitems(item.key)" text="删除" type="danger" class="delete-button" />
                  </template>
                </van-swipe-cell>

           </div>
           <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
           <van-checkbox v-model="allChecked">全选</van-checkbox>
             </van-submit-bar>
        </div>
    <mtabbar/>
    </div>
</template>

<script>
import commonHead from '_components/commonHead'
import Mtabbar from '_components/Mtabbar'
import { fetchCatesInfo, addItemNumber, delitems, setItemSelect } from '_api'
import { getToken } from '_utils'
import { Dialog } from 'vant'
export default {
  name:'cart',
  data () {
    return {
      items: [],
      total: 0
    }
  },
  components: {
    Mtabbar,
    commonHead
  },
  created () {
    this.fetchCatesInfo()
  },
  methods: {
    onSubmit () {
      const checkedItem = this.items.filter(item =>item.selected)
      if(this.items.length===0 || checkedItem.length===0){
         Dialog.alert({
        title: '购物车为空',
        message: '没有选中的商品，请前往购买商品'
      }).then(()=>{
          this.$router.push('/home')
      })
      }else{
      this.$router.push('/order')
      }

     
      
       
    },
    itemSelectChang (key, selected) {
      setItemSelect({
        key,
        selected,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    delitems (key) {
      Dialog.confirm({
        title: '标题',
        message: '是否删除'
      })
        .then(() => {
          // 确认删除
          delitems({
            key,
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              this.items = res.data.data.items
              this.total = res.data.data.price
              this.$store.commit('cart/set_items', res.data.data.items)
            }
            if (res.data.code === 700) {
              console.log(this.items)

              this.items = []

              console.log(this.items)

              this.total = 0
              this.$store.commit('cart/set_items', this.items)
            }
          })
        })
    },

    addItemNumber (key, number) {
      addItemNumber({
        key,
        number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    fetchCatesInfo () {
      fetchCatesInfo({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    }
  },
  computed: {
    allChecked: {
      get () {
        if (this.items.length) {
          return this.items.every(item => item.selected)
        } else {
          return false
        }
        // return this.items.every(item => item.selected)
      },
      set (val) {
        const keys = []
        this.items.forEach(item => {
          keys.push(item.key)
        })
        console.log(keys.join(','))
        setItemSelect({
          key: keys.join(','),
          selected: val,
          token: getToken()
        }).then(res => {
          this.items = res.data.data.items
          this.total = res.data.data.price
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.wrap {
  padding-bottom: 100px;
   .delete-button {
    height: 100%;
  }
.item{
  display: flex;
  background-color: #fafafa;
  .van-card{
    flex: 1;
  }
}
 .delete-button {
    height: 100%;
  }
  .van-submit-bar{
    bottom: 50px;
  }
}
</style>

